<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="../../common/CSS/reset.css">
    <link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link rel="stylesheet" href="../../dist/css/login.min.css">
</head>

<body>
    <div id="login">
        <header class="header" >

            <nav class="header__flex">
                <a class="header__logo" href="#"><img src="/assetes/images/loginImg/logo.svg" alt="logo"></a>
                <a class="header__toggle hide-for-desktop" href="#" :class="{ active: isActive }" @click="isActiveBtn">
                    <span></span>
                    <span></span>
                    <span></span>
                </a>


                <div class="header__links hide-for-mobile">
                    <a href="/">Home</a>
                    <a href="/">About</a>
                    <a href="/">Contact</a>
                    <a href="/">Blog</a>
                    <a href="/">Careers</a>
                </div>

                <button class="header__btn hide-for-mobile" type="button">Request Invite</button>
            </nav>

            <transition name="fade">
                <div v-show="isActive" class="overlay"></div>
            </transition>
            <transition
                enter-active-class="animate__animated animate__fadeInDown"
                leave-active-class="animate__animated animate__fadeOutUp">
                <div v-show="isActive" class="header__menu">                    
                    <a href="/">Home</a>
                    <a href="/">About</a>
                    <a href="/">Contact</a>
                    <a href="/">Blog</a>
                    <a href="/">Careers</a>
                </div>
            </transition>

        </header>

        <section class="nav">
            <div class="container">
                <div class="nav__image"></div>
                <div class="nav__text">
                    <h1>sass模块化布局</h1>
                    <p>A good medicine tastes bitter.</p>
                    <button class="nav__btn hide-for-desktop" type="button">Request Invite</button>
                </div>
            </div>    
        </section>

    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- <script src="../../common/JS/vue.min.js"></script> -->
<script src="../../dist/js/login.min.js"></script>
<script>
    // rem 布局
    // (function (doc, win) {
    //     var docEl = doc.documentElement,
    //         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    //         recalc = function () {
    //             var clientWidth = docEl.clientWidth;
    //             if (clientWidth < 768) {
    //                 docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
    //             } else {
    //                 docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
    //             }
    //         };
    //     if (!doc.addEventListener) return;
    //     win.addEventListener(resizeEvt, recalc, false);
    //     doc.addEventListener('DOMContentLoaded', recalc, false);
    //     recalc()
    // })(document, window)
 
</script>

</html>